import React, { useState, useEffect } from "react";

function Heroheader() {
  const [time, setTime] = useState(new Date());

  //时间实现
  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  function formmatDate() {
    const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
    const currentDate = new Date();
    const day = currentDate.getDay();
    return weekdays[day];
  }

  function formatTime() {
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();

    return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}${`星期` + formmatDate()}`;
  }

  function padZero(num: number) {
    return (num < 10 ? "0" : "") + num;
  }


  return (
    <header className="flex justify-between items-center border-double border-b-8 border-black h-1/5">
      <div className="border-r-4 border-black w-2/6 h-3/4 mx-2 text-balance">
        左边一块
      </div>
      <div className="w-3/6 h-full text-center text-9xl select-none">
        <h1>首&nbsp;页</h1>
      </div>
      <div className="border-l-4 border-black w-2/6 h-3/4 mx-2 text-end">
        {/* TODO 时间 */}
        <div className="border-4 border-black text-center ml-2 p-2 mt-2 ">
          <div className="text-balance text-6xl font-bold ">
            <span>{formatTime()}</span>
          </div>
        </div>
      </div>
    </header>
  );
}

export default Heroheader;
